@extends('layouts.app')

@section('content')
<div class="container defaultFontSize">
    <div class="row">
        <div class="col-md-8 col-md-offset-2" style="margin-bottom: 80px;">
            <div class="panel panel-default">
                <div class="panel-body">
                    <span class="left">余额:<i>0.06</i>元</span>
                    <span class="right">持仓盈亏：<i>0.00</i>元</span>
                </div>
            </div>
            
            <div class="panel panel-default">
                <div class="panel-body">
                    <!-- Nav tabs -->
					<ul id="myTab" class="nav nav-tabs agent-flex" role="tablist">
					  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">下单</a></li>
					  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">持仓</a></li>
					  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">结算</a></li>
					</ul>
					
					<!-- Tab panes -->
					<div class="tab-content">
						<!--下单-->
						<div role="tabpanel" class="tab-pane active" id="home">
							<div class="business-subject clearfix">
								<div class="col-xs-6 business-title business-titlelinhe">
									恒生期权
									<span id="price">23483.00</span>
								</div>
								<div class="col-xs-6 business-title business-titlepadding">
									<span class="col-xs-12" id="up">-209.00</span>
									<span class="col-xs-12" ><span id="ups">-0.08</span>%</span>
								</div>
								<div class="col-xs-12 business-titleborderbottom ">
									<div class="col-xs-6 text-left clearpadding">卖价<span id="BP">23477.00</span></div>
									<div class="col-xs-6 text-right clearpadding">买价<span id="SP">23477.00</span></div>
								</div>
							</div>
							<!--canvs-->
							<div class="panel panel-default" style="margin-top: 20px;">
                				<div class="panel-body">
                					<!-- Nav tabs -->
									<ul class="nav nav-tabs" role="tablist">
									  <li role="presentation" class="active"><a href="#kline" role="tab" data-toggle="tab">分时图</a></li>
									  <li role="presentation"><a href="#fenshi" role="tab" data-toggle="tab">K线图</a></li>
									</ul>
									<!-- Tab panes -->
									<div class="tab-content">
									  <div role="tabpanel" class="tab-pane active" id="kline">
									  	<svg id="svgbox" class="svgbox" version="1.1" xmlns="http://www.w3.org/2000/svg">
								        	<g>
								        		<!--0--><text x="5" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>17:00</tspan></text>
								        		<!--1--><text x="10" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>9:00</tspan></text>
								        		<!--2--><text x="116" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>13:00</tspan></text>
								        		<!--3--><text x="10" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>16:15</tspan></text>
								        		<!--4--><text x="15" y="240" fill="#d0402d" style="text-anchor: start;font-size:8pt"><tspan>最高价</tspan></text>
								        		<!--5--><text x="15" y="240" fill="#d0402d" style="text-anchor: start;font-size:8pt"><tspan>最低价</tspan></text>
								        		<!-- --><line x1='' y1='' x2='' y2='' stroke="red" stroke-dasharray="3,3"></line>
								        	</g>
								        	<g>
								        		<path stroke="none" fill="#3083ca" fill-opacity="0.2" d="M 0,140 L150,140Z"></path><!--线-->
								        		<path stroke="#3083ca" fill="none" d="M 0,140 L150,140Z"></path><!--图-->
								        	</g>
								        	<g>

								        	</g>
								        </svg>
									  </div>
									  <div role="tabpanel" class="tab-pane" id="fenshi">
									  		<svg id="svgfie" class="svgbox" version="1.1" xmlns="http://www.w3.org/2000/svg">
									        	<g>
									        		
									        	</g>
									        	<g>
									        		<text x="5" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>17:00</tspan></text><!--最高-->
								        			<text x="10" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>9:00</tspan></text><!--最低-->
									        	</g>
									        	<g>
									        		<text x="5" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>17:00</tspan></text><!--1-->
								        			<text x="10" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>9:00</tspan></text><!--2-->
								        			<text x="5" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>17:00</tspan></text><!--3-->
								        			<text x="10" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>9:00</tspan></text><!--4-->
								        			<text x="5" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>17:00</tspan></text><!--5-->
								        			<text x="10" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>9:00</tspan></text><!--6-->
									        	</g>
									        	<g></g>
									        	<g></g>
									        	<g></g>
									        </svg>
									  </div>
									</div>
                				</div>
                			</div>
                			<div class="col-xs-12 col-md-12 business-fixed">
                				<div class="col-xs-6 col-md-6"><button id="rise" type="button" class="btn btn-danger">看涨</button></div>
                				<div class="col-xs-6 col-md-6"><button id="fall" type="button" class="btn btn-success">看跌</button></div>
                			</div>
                			<!-- Modal -->
							<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							  <div class="modal-dialog">
							    <div class="modal-content">
							      <div class="modal-header">
							        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
							        <h4 class="modal-title" id="myModalLabel">下单</h4>
							      </div>
							      <div class="modal-body clearfix">
							      	<div class="col-md-8 fonsize2 padding3">
							      		恒生期权
							      	</div>
							      	<div class="dropdown col-md-8 clearfix padding3">
							      		<div class="col-xs-6 business-model text-right clearpadding">到期时间</div>
							      		<div class="col-xs-6 text-left clearpadding paddingleft">
							      			<button id="dLabelx" class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
										    <span class="itemx">3600秒</span>
												<span class="caret"></span>
											</button>
										  	<ul class="dropdown-menu business-hideli" role="menu" aria-labelledby="dLabelx">
									    		<li>60秒</li>
									    		<li>300秒</li>
									    		<li>900秒</li>
									    		<li>1800秒</li>
									    		<li>3600秒</li>
									    	</ul>
							      		</div>
									</div>
									<div class="dropdown col-md-8 clearfix magintop10 padding3">
							      		<div class="col-xs-6 business-model text-right clearpadding">投资金额</div>
							      		<div class="col-xs-6 text-left clearpadding paddingleft">
							      			<button id="dLabels" class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
										    	<span class="itemx">50元</span>
												<span class="caret"></span>
											</button>
										  	<ul class="dropdown-menu business-hideli" role="menu" aria-labelledby="dLabels">
									    		<li>50元</li>
									    		<li>100元</li>
									    		<li>200元</li>
									    		<li>500元</li>
									    	</ul>
							      		</div>
									</div>
									<div class="dropdown col-md-8 clearfix magintop10 padding3">
							      		<div class="col-xs-6 business-model text-right clearpadding">潜在收益率<span id="rate">0.76</span>%</div>
							      		<div class="col-xs-6 business-model text-left clearpadding paddingleft">
							      			潜在收益<span id="ratex">880</span>元
							      		</div>
									</div>
									<div class="dropdown col-md-8 clearfix magintop10 padding3">
							      		及时执行(最新执行价<span>23403.00</span>)
									</div>
							      </div>
							      <div class="modal-footer">
							        <div class="col-xs-12 text-center risesend"><button id="risesend" type="button" class="btn btn-danger col-xs-12">看涨</button></div>
                					<div class="col-xs-12 text-center fallsend"><button id="fallsend" type="button" class="btn btn-success col-xs-12">看跌</button></div>
							      </div>
							    </div>
							  </div>
							</div>
							<!--script-->
							<script type="text/javascript">
								//5分钟图的大小
								$('#svgfie').width($('#svgbox').parent().width()).height($('#svgbox').parent().width()*3/4);
//								console.log($('#container').parent().width())
								//点击涨跌的按钮
								$('#rise').click(function(){
									$('#myModal').modal('show');
									$('.risesend').show();
									$('.fallsend').hide();
								})
								$('#fall').click(function(){
									$('#myModal').modal('show');
									$('.fallsend').show();
									$('.risesend').hide()
								})
								//时间对应的收益率
								var temp = {60:0.76,300: 0.78,900: 0.80,1800: 0.82,3600: 0.85};
//								console.log(temp[60]);
								//点击时间和金额时，收益及收益率变动
								$('.business-hideli').each(function(){
									$(this).find('li').each(function(){
										$(this).click(function(){
											$(this).parent().parent().find('button').find('.itemx').html($(this).html());
											var second=parseInt($('#dLabelx').find('.itemx').html().replace(/[^0-9]/ig,""));
											var num   =parseInt($('#dLabels').find('.itemx').html().replace(/[^0-9]/ig,""));
//											var value = parseInt($('#dLabelx').find('.itemx').html().replace(/[^0-9]/ig,""))+parseInt($('#dLabels').find('.itemx').html().replace(/[^0-9]/ig,""));
											$('#rate').html(temp[second]);
											$('#ratex').html(num*temp[second]+num);
										})
									})
								})
								//下单的发送按钮
								$('#risesend').click(function(){
									bayajax(0)
								});
								$('#fallsend').click(function(){
									bayajax(1)
								});
								//下单ajax
								var heuyueid='',urlgt='';
								function bayajax(mol){
									console.log(mol);
									$('#myModal').modal('hide');
									$('#myTab li:eq(1) a').tab('show');
//									$.ajax({
//										type:"post",
//										data:{
//											option_id:heuyueid,
//											direction:zhangdie,
//											duration:parseInt($('#dLabelx').find('.itemx').html().replace(/[^0-9]/ig,"")),
//											invest:parseInt($('#dLabels').find('.itemx').html().replace(/[^0-9]/ig,"")),
//											yield_rate:temp[parseInt($('#dLabelx').find('.itemx').html().replace(/[^0-9]/ig,""))]
//										},
//										url:urlgt,
//										//async:true,
//										success:function(data){
//											console.log(data);
//											$('#myModal').modal('hide');
//											$('#myTab li:eq(2) a').tab('show');
//										},
//										error:function(e){
//											console.log(e)
//										}
//									});//发送
								}
								//实时
								var urltime='http://db2015.wstock.cn/wsDB_API2/stock.php?r_type=2&market=HIHSI09&num=200&u=test&p=8e6a',
									price=$('#price'),up=$('#up'),ups=$('#ups'),BP=$('#BP'),SP=$('#SP');
//								nowjson(3);
//								setInterval(nowjson(2),1000);
								function nowjson(i){
									$.getJSON(urltime, function(data){
									   console.log(data)
									   var upmm=parseFloat(data[0]['NewPrice'])-parseFloat(data[0]['Open']),
									       upsmm=((parseFloat(data[0]['NewPrice'])-parseFloat(data[0]['Open']))/parseFloat(data[0]['Open'])).toFixed(i);
									   price.html(data[0]['NewPrice']);
									   if(upmm>0){
									   		up.html(upmm).addClass('publicred').removeClass('publicgreen');
									   }else{
									   		up.html(upmm).addClass('publicgreen').removeClass('publicred');
									   }
									   if(upsmm>0){
									   		ups.html(upsmm).addClass('publicred').removeClass('publicgreen');
									   }else{
									   		ups.html(upsmm).addClass('publicgreen').removeClass('publicred');
									   }
									   if(data[0]['BP1']>data[0]['Open']){
									   		BP.html(data[0]['BP1']).addClass('publicred').removeClass('publicgreen');
									   }else{
									   		BP.html(data[0]['BP1']).addClass('publicgreen').removeClass('publicred');
									   }
									   if(data[0]['SP1']>data[0]['Open']){
									   		SP.html(data[0]['SP1']).addClass('publicred').removeClass('publicgreen');
									   }else{
									   		SP.html(data[0]['SP1']).addClass('publicgreen').removeClass('publicred');
									   }
									});
								};
								//分时
								var urlfen='http://db2015.wstock.cn/wsDB_API2/TheTimeTrend.php?r_type=2&symbol=HIHSI09&u=fivip100&p=yixi888';
								var svg = {'lang':840,'b1':'17:00','b2': '09:00','b3': '13:00','b4':'16:15','p1':0.4821,'p2':0.75};
								//lang：总时长  b1：开始时间  b2：中间时间1  b3：中间时间3  b4：结束时间   p1：中间1值   p2：中间2值
								var svgdataname = ['TimeTrend','Volume'];
								//svgdataname[0]:path数组下标  svgdataname[1]：line数组下标
								
								var urlfie='http://db2015.wstock.cn/wsDB_API2/kline.php?r_type=2&symbol=HIHSI09&u=fivip100&p=yixi888&qt_type=5&return_t=3';
								var fiesvg = {'lang':168,'p1':0.4821,'p2':0.75};
						</script>
							<script src="{{ asset('javascript/delsvg.js') }}" type="text/javascript" charset="utf-8"></script>
						</div>
						<!--持仓-->
						<div role="tabpanel" class="tab-pane" id="profile">持仓</div>
						<!--结算-->
						<div role="tabpanel" class="tab-pane" id="messages">结算</div>
					</div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
